import { useEffect, useRef, useState } from "react"
import HomePage_ModalComponent from "../../../../component/modal"
import HomePage_TableComponent from "../../../../component/table";
import { $eventBus, $EventBus_off, $EventBus_on, $export_excel, $PowerSetting } from "../../../../../../common/utils";
import { $Http } from "../../../../../../network";
import dayjs from 'dayjs';
import HomePage_DataMaintenancePage_MaintenanceTestingEquipmentMaintenancePage_AddModalComponent from "./component/addModal";
import { message } from "antd";
import HomePage_ModalComponent_ConfirmationModallComponent from "../../../../component/modal/component/confirmationModal";

// 主页-数据维护页面-监测设备维护页面
const HomePage_DataMaintenancePage_MaintenanceTestingEquipmentPage = () => {
    const initParamsData = useRef<object>({})
    const paramsData = useRef<object>({})
    let [pageNo, setPageNo] = useState<number>(1)
    let [pageSize, setPageSize] = useState<number>(10)
    const [sourceData, setSourceData] = useState<object>({})
    const [isAddModal, setIsAddModal] = useState<boolean>(false)
    const [isDeleteModal, setIsDeleteModal] = useState<boolean>(false)
    const [modalData, setModalData] = useState<object>({})
    const columnList = [
        {
            title: '序号',
            width: 60,
            render: (text: string, record: object, idx: number) => idx + 1,
        },
        {
            title: '设备ID',
            minWidth: 85,
            dataIndex: 'deviceID',
            render: (text: string) => text ?? "-"
        },
        {
            title: '巡维中心',
            minWidth: 85,
            dataIndex: 'maintainCentre',
            render: (text: string) => text ?? "-"
        },
        {
            title: '安装站点',
            minWidth: 85,
            dataIndex: 'stationName',
            render: (text: string) => text ?? "-"
        },
        {
            title: '监测对象',
            minWidth: 85,
            dataIndex: 'monitorName',
            render: (text: string) => text ?? "-"
        },
        {
            title: '监测装置',
            minWidth: 85,
            dataIndex: 'monitorDevice',
            align: "center",
            render: (text: string) => text ?? "-"
        },
        {
            title: '通信地址',
            minWidth: 85,
            dataIndex: 'mailingAddress',
            render: (text: string) => text ?? "-"
        },
        {
            title: '运行状态',
            children: [
                {
                    title: (
                        <>
                            <span>CPU占用率</span>
                            <br />
                            <br />
                        </>
                    ),
                    minWidth: 90,
                    dataIndex: 'cpuRate',
                    align: "right",
                    render: (text: string) => text ?? "-"
                },
                {
                    title: (
                        <>
                            <span>内存占用率</span>
                            <br />
                            <br />
                        </>
                    ),
                    minWidth: 100,
                    dataIndex: 'memRate',
                    align: "right",
                    render: (text: string) => text ?? "-"
                },
                {
                    title: (
                        <>
                            <span>磁盘占用率</span>
                            <br />
                            <br />
                        </>
                    ),
                    minWidth: 100,
                    dataIndex: 'diskRate',
                    align: "right",
                    render: (text: string) => text ?? "-"
                },
                {
                    title: (
                        <>
                            <span>连续工作时间(h)</span>
                            <br />
                            <br />
                        </>
                    ),
                    minWidth: 120,
                    dataIndex: 'workHour',
                    align: "right",
                    render: (text: string) => text ?? "-"
                },
            ]
        },
        {
            title: sourceData["list"]?.filter((item: object) => !item["workOrderID"])?.length > 0 ? '操作' : "",
            align: "right",
            width: sourceData["list"]?.filter((item: object) => !item["workOrderID"])?.length > 0 ? 160 : 60,
            fixed: "right",
            render: (text: string, record: object, idx: number) => $PowerSetting()["basePower"] && !record["workOrderID"] && <span className="homePage-tableOperationBtn" onClick={() => click_operation(record)}>删除</span>


        },
    ];
    const http_search = () => {
        $Http("search", { typeName: "数据维护/监测设备维护", ...paramsData.current, pageNo, pageSize }).then((res) => {
            setSourceData({ ...res["data"] })
        })
    }


    const click_operation = (data: object) => {
        setIsDeleteModal(true)
        setModalData(data)

    }

    const change_pagination = (no: number, size: number) => {
        pageNo = no
        pageSize = size
        setPageNo(pageNo)
        setPageSize(pageSize)
        http_search()
    }

    const change_export = (list: Array<number>) => {
        $export_excel("数据维护/监测设备维护", list)
    }

    const change_modalCancel = (value: boolean) => {
        setIsAddModal(false)

        value && setTimeout(() => {
            $eventBus.emit("headerOperationConditionSwitch", { source: "HomePage_DataMaintenancePage_SubstationMaintenancePage", explain: "新增/编辑成功，请关闭头部操作条件，并查询", data: { isOpen: false, isSearch: true } })
        });
    }


    // 广播函数数据
    const eventBusFuncData = {
        // 头部操作新增
        headerOperationAdd: (data: object) => {
            setModalData({ type: "add" })
            setIsAddModal(true)
        },
        // 头部操作初始参数
        headerOperationInitParamsData: (data: object) => {
            initParamsData.current = data["data"]["initParamsData"]
            paramsData.current = data["data"]["initParamsData"]
            http_search()
        },
        // 头部操作查询
        headerOperationSearch: (data: object) => {
            pageNo = 1
            setPageNo(pageNo)
            paramsData.current = { ...paramsData.current, ...data["data"]["paramsData"] }
            http_search()
        },
        // 头部操作条件的开关
        headerOperationConditionSwitch: (data: object) => {
            pageNo = 1
            setPageNo(pageNo)
            paramsData.current = { ...initParamsData.current }
            http_search()
        },
        // 确认操作
        confirmOperation: (data: object) => {
            data["data"]["type"] !== "mainCount" && $Http("delete", { typeName: "数据维护/监测设备维护", id: data["data"]["id"], deviceID: data["data"]["deviceID"] }).then((res) => {
                message.success(res["success"])
                setTimeout(() => {
                    $eventBus.emit("headerOperationConditionSwitch", { source: "HomePage_DataMaintenancePage_SubstationMaintenancePage", explain: "删除成功，请关闭头部操作条件，并查询", data: { isOpen: false } })
                })
                setIsDeleteModal(false)
            })
        }
    }


    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])
    return (
        <>
            <HomePage_TableComponent name="homePageDataMaintenancePageMaintenanceTestingEquipmentPageTable"
                isRowSelection
                smallPaddingList={["运行状态"]}
                borderLeftList={[""]}
                borderRightList={["通信地址"]}
                borderBottomList={["运行状态"]}
                alignCenterList={["监测装置"]}
                alignRightList={["操作"]}
                columnList={columnList} pageNo={pageNo} pageSize={pageSize} sourceData={sourceData} change_pagination={change_pagination} change_selectedRowList={change_export} />
            {
                isAddModal && <HomePage_ModalComponent width={640} change_cancel={setIsAddModal} contentComponent={
                    <HomePage_DataMaintenancePage_MaintenanceTestingEquipmentMaintenancePage_AddModalComponent sourceData={modalData} change_cancel={change_modalCancel} />
                }

                />
            }
            {
                isDeleteModal && <HomePage_ModalComponent width={500} change_cancel={setIsDeleteModal} contentComponent={<HomePage_ModalComponent_ConfirmationModallComponent title={`删除站点`} content={`确认删除 “${modalData["deviceID"]}” 吗？`} operation="删除" sourceData={modalData} change_cancel={setIsDeleteModal} />} />
            }
        </>
    )
}
export default HomePage_DataMaintenancePage_MaintenanceTestingEquipmentPage